<template>
	<view class="manage-view">
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">全部评论</view>
		</view>

		<view class="queryInputs">
			<view class="queryInput">
				<input @blur="managePageIslandComment" style="width: 100%;font-size: 28rpx;" v-model="queryInput.nickname"
					placeholder="昵称关键词" />
			</view>

			<view class="queryInput">
				<input @blur="managePageIslandComment" style="width: 100%;font-size: 28rpx;" v-model="queryInput.content"
					placeholder="内容关键词" />
			</view>
		</view>

		<view class="total-row">
			共{{queryInput.total}}条
		</view>


		<view class="content">
			<view class="comments">
				<view class="comment" v-for="(comment,commentIndex) in commentList">
					<view class="comment-top">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<view class="avatar">
								<img :src="comment.userInfo.avatar"></img>
							</view>
							<view class="nickname">{{comment.userInfo.nickname}}</view>
						</view>
					</view>

					<view>{{comment.content}}</view>


					<view class="pictures">
						<view v-for="picture in comment.pictures" class="picture">
							<img :src="picture" @tap="ViewImage(picture,comment.pictures)" />
						</view>
					</view>

					<view class="comment-bottom">

						<view class="date">于{{comment.gmtCreate}}</view>

						<view style="display: flex;flex-direction: row;align-items: center;">

							<uni-icons v-if="comment.visibility==0" @tap="changeVisibility(comment,commentIndex)" type="eye-slash" size="28" color="#9d9d9d">
							</uni-icons>
							<uni-icons v-if="comment.visibility==1" @tap="changeVisibility(comment,commentIndex)" type="eye" size="28" color="#9d9d9d">
							</uni-icons>
							<uni-icons v-if="comment.visibility==2" @tap="changeVisibility(comment,commentIndex)" type="eye-filled" size="28" color="#9d9d9d">
							</uni-icons>



<!-- 							<uni-icons type="chatbubble" size="28" color="#9d9d9d">
							</uni-icons> -->
							<!-- <uni-icons type="trash" size="25" color="#9d9d9d" @click="removeCourseComment(comment.id,commentIndex)"></uni-icons> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryInput: {
					courseId: null,
					nickname: "",
					content: "",

					pageNow: 1,
					pageSize: 20,
					total: 0,
					notIn: 0,
				},
				commentInput: {
					id: null,
					commentIndex: null,
					visibility: null,
					reply: null
				},
				commentList: []
			}
		},
		onLoad(options) {
			if (options.islandId) {
				this.queryInput.islandId = options.islandId
				
				if(options.linkId){
					this.queryInput.id = options.linkId
				}
				
				this.managePageIslandComment()
			}
		},
		onReachBottom() {
			this.queryInput.pageNow++
			this.$api.managePageIslandComment(this.queryInput).then(res => {
				this.commentList = [...this.commentList, ...res.data.rows]
				this.queryInput.total = res.data.totalPage
			})
		},
		methods: {
			managePageIslandComment() {
				this.queryInput.pageNow = 1
				this.$api.managePageIslandComment(this.queryInput).then(res => {
					this.commentList = res.data.rows
					this.queryInput.total = res.data.total
				})
			},

			changeVisibility(comment, commentIndex) {
				let visibility = comment.visibility - 1
				if (visibility >= 3) {
					visibility = 0
				}
				if (visibility <= -1) {
					visibility = 2
				}
				this.commentInput = {
					id: comment.id,
					commentIndex: commentIndex,
					visibility: visibility,
					reply: null
				}
				this.manageUpdateIslandComment()
			},
			
			
			//移除评论
			removeCourseComment(id,index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确定删除该评论？',
					success(res) {
						if (res.confirm) {
							// 执行请求
							that.$api.manageRemoveCourseComment({
								id
							}).then(res => {
								that.commentList.splice(index, 1)
								uni.showToast({
									title: '删除成功',
									icon: '',
									duration: 500
								});
							})
						}
					}
				});
				this.closeModal();
			},

			manageUpdateIslandComment() {
				this.$api.manageUpdateIslandComment(this.commentInput).then(res => {
					this.commentList[this.commentInput.commentIndex].visibility = this.commentInput.visibility
					uni.showToast({
						title: '修改成功',
						icon: '',
						duration: 500
					});
				})
			},


			toBackPage() {
				uni.navigateBack()
			},
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		}
	}
</script>

<style scoped lang="scss">
	.manage-view {
		display: flex;
		flex-direction: column;
		padding-top: 80rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 20rpx 0;

			background-color: white;
			border-bottom: solid thin #efefef;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}

		.queryInputs {
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.queryInput {
				width: 270rpx;
				padding: 30rpx;

				display: flex;
				flex-direction: row;
				align-items: center;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 4px 2px #f5f7f5;
			}

		}

		.querySelect {
			width: 630rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding: 30rpx;

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 4px 2px #f5f7f5;
			font-size: 28rpx;
		}

		.total-row {
			margin-left: 30rpx;
			width: 690rpx;
			text-align: right;
			margin-top: 20rpx;
		}


		.content {

			display: flex;
			flex-direction: column;

			.comments {

				display: flex;
				flex-direction: column;
				width: 690rpx;

				margin-top: 20rpx;
				margin-bottom: 160rpx;

				margin-left: 30rpx;


				.comment {
					width: 630rpx;
					padding: 30rpx;
					margin: 20rpx 0;
					background-color: #ffffff;
					box-shadow: 1px 1px 8px 2px #e9eee9;
					border-radius: 20rpx;

					.comment-top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							overflow: hidden;
						}


						.nickname {
							margin-left: 20rpx;
						}
					}

					.comment-bottom {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.date {
							font-size: 28rpx;
							color: gray;
						}
					}

					.pictures {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin: 10rpx 0;

						width: 100%;
						flex-wrap: wrap;

						.picture {
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
							overflow: hidden;
						}
					}

				}
			}


		}

		image {
			height: 100%;
			width: 100%;
		}

		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}
</style>
